<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天知道</title>
</head>
<style>
    #weather{
        width: 1100px;
        height: 500px;
        margin: 150px auto;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    @font-face {
        font-family: 'iconfont';
        src: url('font2/iconfont.eot');
        src: url('font2/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font2/iconfont.woff2') format('woff2'),
            url('font2/iconfont.woff') format('woff'),
            url('font2/iconfont.ttf') format('truetype'),
            url('font2/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 50px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    header{
        margin: 150px auto 50px;
        width: 200px;
        height: 50px;
    }
    .one{
        color: #00a4ff;
    }
    .two{
        color: rgb(144, 214, 38);
    }
    .three{
        color: rgb(255, 187, 0);
    }
    .search{
        width: 800px;
        height: 50px;
        border: 1px solid #00a4ff;
        margin: 0 auto;
    }
    .insearch{
        float: right;
        display: block;
        width: 150px;
        height: 50px;
        background-color: #00a4ff;
        color: #fff;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .decorate{
        border:none;
        width: 600px;
        margin: 0 20px;
        height: 48px;
        outline: none;
        font-size:20px;
        font-weight: 200;
    }
    .hotKey{
        margin: 10px 160px;
    }
    .hotKey a{
        text-decoration: none;
        color: #666;
        margin: 0 4px;
    }
    .hotKey a:hover{
        color:yellowgreen;
    }
    h2,
    .tem{
        color: orange;
        text-align: center;
    }
    .display ul{
        margin: 100px 0;
    }
    h2{
        font-size: 30px;
        margin: 18px;
    }
    .day{
        color: rgb(165, 165, 165);
        text-align: center;
        margin-top: 15px;
    }
    ul li{
        display: inline-block;
        width: 200px;
        height: 150px;
        border-right: 1px solid #ccc;
    }
    ul li:last-child{
        border:none;
    }
</style>
<body>
    <div id="weather">
        <header>
            <span class="iconfont one">&#xe605;</span>
            <span class="iconfont two">&#xe60a;</span>
            <span class="iconfont three">&#xe651;</span>
        </header>
        <div class="search">
            <input type="text" class="decorate" placeholder="请输入查询的天气" v-model="now" @keyup.enter="query">
            <span class="insearch" @click="query">搜   索</span>
        </div>
        <div class="hotKey"> 
            <a href="javascript:;" @click="exa('北京')">北京</a>
            <a href="javascript:;" @click="exa('上海')">上海</a>
            <a href="javascript:;" @click="exa('西安')">西安</a>
            <a href="javascript:;" @click="exa('深圳')">深圳</a>
        </div>
        <div class="display">
            <ul>
                <li v-for="item in weatherList">
                    <h2>{{item.type}}</h2>
                    <div class="tem">
                        <span>{{item.low}}</span>
                        <span>~</span>
                        <span>{{item.high}}</span>
                    </div>
                    <div class="day">{{item.date}}</div>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var weather=new Vue({
            el:"#weather",
            data:{
                weatherList:[],
                now:""
            },
            methods:{
                exa:function(now){
                    this.now=now;
                    this.query();
                },
                query:function(){
                    var that=this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.now).then(function(response){
                        that.weatherList=response.data.data.forecast;
                    }).catch(function(err){
                        console.log(err);
                        
                    })
                }
            }
        })
    </script>
</body>
</html>